import React from 'react'
import { Space } from 'antd'
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons'
import classNames from 'classnames'
import './Trend.css'

interface TrendProps {
  value: number | string
  suffix?: string
  prefix?: string
  reverse?: boolean
  colorful?: boolean
  className?: string
  style?: React.CSSProperties
}

const Trend: React.FC<TrendProps> = ({
  value,
  suffix = '%',
  prefix = '',
  reverse = false,
  colorful = true,
  className,
  style
}) => {
  const isUp = reverse ? Number(value) < 0 : Number(value) > 0
  const absoluteValue = Math.abs(Number(value))

  const classes = classNames(
    'trend',
    {
      'trend-up': isUp && colorful,
      'trend-down': !isUp && colorful,
    },
    className
  )

  return (
    <Space className={classes} style={style}>
      {prefix && <span>{prefix}</span>}
      <span>{absoluteValue}</span>
      {suffix && <span>{suffix}</span>}
      {isUp ? <CaretUpOutlined /> : <CaretDownOutlined />}
    </Space>
  )
}

export default Trend 